<template>
  <div class="audioSearch">
    <el-input v-loading="fileState.loading" v-model="fileState.videoTex" class="loading_text" type="textarea" rows="12"
      placeholder="录音转写内容将显示在这里..."></el-input>
    <div style="padding-bottom: 10px;">
      <div class="canviseinit">
        <div class="time">{{ videoState.duration }}s</div>
        <canvas class="showCanvasVideo" style="display: none;" id="canvas"></canvas>
        <div style="display:flex;">
          <el-button title='录音' type="primary" circle :icon="Microphone" :class="{ 'recording': state.recording }"
            @click="startRecord($parent)">
          </el-button>
        </div>
      </div>
      <div style="display:flex;margin-top: 10px;justify-content: space-between;">
      </div>
    </div>
  </div>
</template>

<script setup>
import { videoFun } from './video.js'
import { VideoPlay, VideoPause, SwitchButton, Download, UploadFilled, Microphone, Upload } from '@element-plus/icons-vue'
import axios from 'axios'
import { reactive } from 'vue'
import { whisperAsr } from './api/api.js'
const emit=defineEmits('needSummary')

let fileState = reactive({
  loading: false,
  videoTex: '1'
})
const { startVideoRecord,
  endVideoRecord,
  stopVideoPlay,
  playVideoRecord,
  downloadVideoPCM, pauseVideoPlay,
  resumeVideoPlay, downloadVideoMP3,
  downloadVideoWAV, videoState, getVideoWAV } = videoFun()

let state = reactive({
  recording: false,

})

const startRecord = () => {
  if (state.recording) {
    // 停止录音
    state.recording = false
    endVideoRecord()
    setTimeout(() => {

      uploadVideo()
    })
  } else {
    // 开始录音
    state.recording = true
    startVideoRecord()
  }
}
const uploadVideo = () => {
  let blob = getVideoWAV()
  if (!blob) {
    ElMessage.error('请先录音！')
    return
  }
  fileState.loading = true
  const formdata = new FormData()
  formdata.append('audio_file', blob)
  whisperAsr(formdata).then((response) => { 
    fileState.loading = false
    fileState.videoTex = response.data
    emit('needSummary')
  }) 
}
defineExpose({ fileState })
</script>

<style lang="scss" scoped>
.audioSearch {
  position: relative;
}

.loading_text {
  height: 100%;
  resize: none;

  ::v-deep(.el-textarea__inner) {
    background-color: #f8fafc;
    border-radius: 10px;
    resize: none;
  }
}

.canviseinit {
  position: absolute;
  right: 10px;
  bottom: 70px;
  display: flex;
  width: 100px;
  justify-content: space-between;
  align-items: center;

}

.recording {

  color: #ef4444;
  animation: pulse 1.5s infinite;
}
</style>